<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<style>
    .banner{
        position: relative;
        overflow: hidden;
        width: 1920px;
    }
    .banner .images ul{
        display: flex;
    }
    .banner .images ul .item{
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
    .banner .actvie{
        opacity: 1;
    }
    .banner .images img{
        position: relative;
        transform: translate(-50%);
        left: 50%;
        width: 1920px;
        height: 550px;
    }
    .btns .btn-left,.btns .btn-right{
        width: 56px;
        height: 56px;
        background-color: gray;
        border-radius: 60px;
        text-align: center;
        font-size: 25px;
        line-height: 56px;
        color: white;
        cursor: pointer;
        user-select:none;
    }
    .btns .btn-left:hover,.btns .btn-right:hover{
        background-color: rgb(10, 10, 10);
    }
    .dians{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        display: flex;
        justify-content: center;
    }
    .dians .d-item{
        width: 15px;
        height: 15px;
        background-color: gray;
        border-radius: 15px;
        margin-left: 15px;
        cursor: pointer;
        transition: all 0.4s;
    }
    .dians .d-item:hover,.dians .d-item.active{
        background-color: red;
        transform: scale(1.5);
    }
    .btns{
        position: absolute;
        width: 80%;

        left: 50%;
        top: 50%;
        transform: translate(0,-28px);
    }
    .btns .btn-left{
        position: absolute;
        left: -50%;
    }
    .btns .btn-right{
        position: absolute;
        right: 50%;
    }
</style>
<body>
    <div class="banner">
        <div class="images">
            <ul>
            </ul>
        </div>
        <div class="btns">
            <div class="btn-left"><</div>
            <div class="btn-right">></div>
        </div>
        <div class="dians">
        </div>
    </div>
    <script src="./json/banner.js"></script>
    <script>
        // 获取轮播图数据并创建元素节点
        const bannerServerURL = "https://res.vmallres.com/"
        const imgList = document.querySelector('.images').querySelector('ul');
        let liveActive = document.querySelector('.active');
        const dians = document.querySelector('.dians');
        let dianActive = dians.querySelector('.active');
        for(let i=0;i<banners.length;i++){
            let li = document.createElement('li');
            let img = document.createElement('img');
            img.src = `${bannerServerURL}${banners[i].imgUrl}`;
            li.classList.add('item');
            if(i==0){
                li.classList.remove('item');
                li.classList.add('active');
                liveActive = li;
            };
            li.appendChild(img);
            imgList.appendChild(li);
        }

        // 轮播定时器
        let timer = setInterval(changeImg,4000);
        let index = 0;
        function changeImg(flag){
            flag?index--:index++;
            if(index>=imgList.children.length)index=0;
            if(index<0)index=imgList.children.length-1;
            liveActive.classList.remove('active');
            liveActive.classList.add('item');
            dianActive.classList.remove('active');
            dians.children[index].classList.add('active');
            dianActive = dians.children[index]
            imgList.children[index].classList.add('active');
            imgList.children[index].classList.remove('item');
            imgList.children[index].style.transition = "all 2s";
            liveActive = imgList.children[index];
        }
        // 左右切换按钮
        const left = document.querySelector('.btn-left');
        const right = document.querySelector('.btn-right');
        right.addEventListener('click',function(){
            changeImg()
            clearInterval(timer);
            timer = setInterval(changeImg,4000)
        })
        left.addEventListener('click',function(){
            changeImg(1)
            clearInterval(timer);
            timer = setInterval(changeImg,4000)
        })
        // 轮播图中心点
        for(let i=0;i<banners.length;i++){
            let div = document.createElement('div');
            div.classList.add('d-item');
            div.dataset.index = i;
            if(i==0){
                div.classList.add('active');
                dianActive = div;
            }
            dians.appendChild(div);
        }
        dians.addEventListener('click',function(e){
            if(e.target.classList.contains("d-item")){
                let index2 = e.target.dataset.index;
                index = index2;
                changeImg2();
            }
        })
        function changeImg2(){
            clearInterval(timer);
            if(index>=imgList.children.length)index=0;
            if(index<0)index=imgList.children.length-1;
            liveActive.classList.remove('active');
            liveActive.classList.add('item');
            dianActive.classList.remove('active');
            dians.children[index].classList.add('active');
            dianActive = dians.children[index]
            imgList.children[index].classList.add('active');
            imgList.children[index].classList.remove('item');
            imgList.children[index].style.transition = "all 2s";
            liveActive = imgList.children[index];
            timer = setInterval(changeImg,4000)
        }
    </script>
</body>
</html>